 {% extends 'base.html'%}
 {% block content%}
<section class="jumbotron text-center">
	<div class="container">
		<h1 class="jumbotron-heading">自己的小demo</h1>
		<p class="lead text-muted">世间安得双全法 不负如来不负卿</p>
		<p>
			<a href="#" class="btn btn-primary my-2">Main call to action</a>
		</p>
	</div>
</section>

<div class="album py-5 bg-light">
	<div class="container">
		<div class="row">
			{% for img in imgs.object_list %}
			<div class="col-md-4">
				<div class="card mb-4 box-shadow">
					<a href="{{img.id}}">
						<img class="card-img-top" src="/media/{{img.img_url}}" style="height: 225px; width: 100%; display: block;">
					</a>
					<div class="card-body">
						<p class="card-text" style="width:303px;height:225px">{{img.img_content}}</p>
						<div class="d-flex justify-content-between align-items-center">

						</div>
					</div>
				</div>
			</div>
			{% endfor %}

		</div>
	</div>
</div>
<nav aria-label="Page navigation">
	<ul class="pagination">
		<!--上一页-->
		<li>
			{% if imgs.has_previous %}
			<a href="?page={{imgs.previous_page_number }}" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
			</a>
			{% else %}
			<span aria-hidden="true">&laquo;</span> {% endif %}
		</li>
		<!--里面的页面-->
		{% for page_num in imgs.paginator.page_range%}
		<li>
			<a href="?page={{page_num}}">{{page_num}}</a>
		</li>
		{% endfor %}
		<!--下一页-->
		<li>
			{% if imgs.has_next %}
			<a href="?page={{imgs.next_page_number }}" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
			</a>
			{% else %}
			<span aria-hidden="true">&raquo;</span> {% endif %}
		</li>
	</ul>
</nav>
{% endblock content%}

<style>
	.card-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
</style>